<template>
    <el-dialog  :title="dialogTitle"   :visible.sync="dialogVisible" 
        :width="DialogNumber == 4 ? '800px' : '600px'" :before-close="handleCancelListDialog" v-dialogDrag>
        <div class="dialog-content">
            <el-form :model="listForm" :rules="listRule1" label-width="100px" 
              ref="listForm" v-if="DialogNumber == 1">
              <el-form-item label="参数标识" required prop="param" class="form-item">
                <el-input 
                  v-model="listForm.param" 
                  placeholder="请输入参数标识，如：PARAM1"
                  prefix-icon="el-icon-tickets"
                  size="medium"
                  maxlength="20"
                  show-word-limit
                >
                </el-input>
                <div class="input-tip greyText">用于系统识别的唯一参数标识，建议使用英文大写</div>
              </el-form-item>

              <el-form-item label="参数名称" required prop="paraM_NAME" class="form-item">
                <el-input 
                  v-model="listForm.paraM_NAME" 
                  placeholder="请输入参数显示名称"
                  prefix-icon="el-icon-tickets"
                  size="medium"
                  maxlength="30"
                  show-word-limit
                >
                </el-input>
                <div class="input-tip greyText">参数在界面中显示的名称，建议使用中文</div>
              </el-form-item>

              <el-form-item label="参数单位" class="form-item">
                <el-input 
                  v-model="listForm.unit" 
                  placeholder="请输入单位，如：m km"
                  prefix-icon="el-icon-tickets"
                  size="medium"
                  maxlength="10"
                  show-word-limit
                >
                </el-input>
                <div class="input-tip">参数值的计量单位</div>
              </el-form-item>
              <el-form-item label="修改权限" prop="u_EDIT" class="form-item switch-item">
                <div class="switch-container">
                  <el-switch
                    v-model="listForm.u_EDIT"
                    active-color="#13ce66"
                    inactive-color="#f0f0f0"
                    :active-value="1"
                    :inactive-value="0"
                    class="permission-switch"
                  ></el-switch>
                  <div class="switch-description">
                    <div v-if="listForm.u_EDIT === 1" class="status-tip active">
                      <i class="el-icon-success redText" style="margin-right: 4px;"></i>
                      <span class="input-tip redText">用户可以在界面上修改此参数的值</span>
                    </div>
                    <div v-else class="status-tip inactive">
                      <i class="el-icon-info greenText" style="margin-right: 4px;"></i>
                      <span class="input-tip greenText">此参数为只读，用户无法修改</span>
                    </div>
                  </div>
                </div>
              </el-form-item>

              <el-form-item label="备注" class="form-item">
                <el-input 
                  v-model="listForm.remark" 
                  type="textarea" 
                  :rows="5" 
                  placeholder="请输入备注信息、使用场景、注意事项等"
                  resize="none"
                  class="remark-textarea"
                  maxlength="300"
                  show-word-limit
                >
                </el-input>
                <div class="input-tip greyText">备注说明有助于其他用户理解和使用</div>
              </el-form-item>
            </el-form>

            <el-form :model="listForm" label-width="100px" ref="listForm" :rules="listRule2" v-if="DialogNumber == 2">
                <el-form-item label="控制值" required prop="control" class="form-item">
                <el-input 
                  v-model="listForm.control" 
                  placeholder="请输入控制值标识，如：CONTROL1"
                  prefix-icon="el-icon-tickets"
                  size="medium"
                  maxlength="20"
                  show-word-limit
                >
                </el-input>
                <div class="input-tip greyText">用于系统识别的唯一参数标识，建议使用英文大写</div>
              </el-form-item>

              <el-form-item label="控制值名称" required prop="controL_NAME" class="form-item">
                <el-input 
                  v-model="listForm.controL_NAME" 
                  placeholder="请输入控制值名称"
                  prefix-icon="el-icon-tickets"
                  size="medium"
                  maxlength="30"
                  show-word-limit
                >
                </el-input>
                <div class="input-tip greyText">参数在界面中显示的名称，建议使用中文</div>
              </el-form-item>

              <el-form-item label="参数单位" class="form-item">
                <el-input 
                  v-model="listForm.unit" 
                  placeholder="请输入单位，如：m km"
                  prefix-icon="el-icon-tickets"
                  size="medium"
                  maxlength="10"
                  show-word-limit
                >
                </el-input>
                <div class="input-tip">参数值的计量单位</div>
              </el-form-item>

              <el-form-item label="备注" class="form-item">
                <el-input 
                  v-model="listForm.remark" 
                  type="textarea" 
                  :rows="5" 
                  placeholder="请输入备注信息、使用场景、注意事项等"
                  resize="none"
                  class="remark-textarea"
                  maxlength="300"
                  show-word-limit
                >
                </el-input>
                <div class="input-tip greyText">备注说明有助于其他用户理解和使用</div>
              </el-form-item>
            </el-form>

            <el-form :model="listForm" label-width="100px" ref="listForm" :rules="listRule3" v-if="DialogNumber == 3">
                <el-form-item label="POINT" required prop="point" class="form-item">
                <el-input 
                  v-model="listForm.point" 
                  placeholder="请输入POINT标识，如：POINT1"
                  prefix-icon="el-icon-tickets"
                  size="medium"
                  maxlength="20"
                  show-word-limit
                >
                </el-input>
                <div class="input-tip greyText">用于系统识别的唯一参数标识，建议使用英文大写</div>
              </el-form-item>

              <el-form-item label="POINT名称" required prop="poinT_NAME" class="form-item">
                <el-input 
                  v-model="listForm.poinT_NAME" 
                  placeholder="请输入POINT名称"
                  prefix-icon="el-icon-tickets"
                  size="medium"
                  maxlength="30"
                  show-word-limit
                >
                </el-input>
                <div class="input-tip greyText">参数在界面中显示的名称，建议使用中文</div>
              </el-form-item>
            </el-form>


             <el-form :model="listForm" label-width="120px" ref="listForm" :rules="listRule4" inline v-if="DialogNumber == 4">
                <div class="form-row">
                <el-form-item label="分量" required prop="comp">
                     <el-input 
                    v-model="listForm.comp" 
                    placeholder="请输入分量标识，如：COMP1"
                    prefix-icon="el-icon-tickets"
                    size="medium"
                    maxlength="20"
                    show-word-limit
                    >
                    </el-input>
                    <div class="input-tip greyText">用于系统识别的唯一参数标识，建议使用英文大写</div>
                </el-form-item>

                
                <el-form-item label="分量名称" required prop="comP_NAME">
                    <el-input 
                    v-model="listForm.comP_NAME" 
                    placeholder="请分量名称"
                    prefix-icon="el-icon-tickets"
                    size="medium"
                    maxlength="30"
                    show-word-limit
                    >
                    </el-input>
                    <div class="input-tip greyText">参数在界面中显示的名称，建议使用中文</div>
                </el-form-item>
                </div>
                
                <div class="form-row switch-group">
                <el-form-item label="关键分量" required>
                    <el-switch
                    v-model="listForm.iskey"
                    active-color="#13ce66"
                    inactive-color="#f0f0f0"
                    :active-value="1"
                    :inactive-value="0"
                    active-text="是"
                    inactive-text="否"
                    class="permission-switch"
                  ></el-switch>
                </el-form-item>
                
                <el-form-item label="过程线" required>
                    <el-switch
                    v-model="listForm.showline"
                    active-color="#13ce66"
                    inactive-color="#f0f0f0"
                    :active-value="1"
                    :inactive-value="0"
                    active-text="显示"
                    inactive-text="不显示"
                    class="permission-switch"
                  ></el-switch>
                </el-form-item>
                
                <el-form-item label="字段显示" required>
                    <el-switch
                    v-model="listForm.isshow"
                    active-color="#13ce66"
                    inactive-color="#f0f0f0"
                    :active-value="1"
                    :inactive-value="0"
                    active-text="显示"
                    inactive-text="不显示"
                    class="permission-switch"
                  ></el-switch>
                </el-form-item>
                </div>
                
                <div class="form-row">
                <el-form-item label="类型" required prop="valuE_TYPE">
                    <el-select v-model="listForm.valuE_TYPE" placeholder="请选择类型" size="medium">
                    <el-option label="原始值" :value="0"></el-option>
                    <el-option label="计算值" :value="1"></el-option>
                    <el-option label="成果值" :value="2"></el-option>
                    <el-option label="评判值" :value="3"></el-option>
                    </el-select>
                </el-form-item>
                </div>
                
                <div class="form-row">
                <el-form-item label="公式" required prop="formula">
                    <el-input 
                    v-model="listForm.formula" 
                    type="textarea" 
                    :rows="5" 
                    placeholder="请输入公式"
                    resize="none"
                    style="width:600px"
                    class="remark-textarea"
                    maxlength="500"
                    show-word-limit
                    >
                    </el-input>
                    <div class="input-tip greyText">公式是用于处理数据的基础，请仔细输入并检查</div>
                </el-form-item>
                </div>
                
                <div class="form-row">
                <el-form-item label="精度" required prop="pricision">
                    <el-input-number v-model="listForm.pricision" placeholder="请输入精度" class="form-input" size="medium"></el-input-number>
                     <div class="input-tip greyText">精度为小数点后几位显示，建议输入2位</div>
                </el-form-item>
                
                <el-form-item label="单位">
                    <el-input v-model="listForm.unit" placeholder="请输入单位" class="form-input" size="medium"></el-input>
                     <div class="input-tip">参数值的计量单位</div>
                </el-form-item>
                </div>
                
                <div class="form-row">
                <el-form-item label="备注">
                    <el-input 
                    v-model="listForm.remark" 
                    type="textarea" 
                    :rows="5" 
                    style="width:600px"
                    placeholder="请输入备注信息、使用场景、注意事项等"
                    resize="none"
                    class="remark-textarea"
                    maxlength="300"
                    show-word-limit
                    >
                    </el-input>
                    <div class="input-tip greyText">备注说明有助于其他用户理解和使用</div>
                </el-form-item>
                </div>
            </el-form>

            <el-form :model="listForm" label-width="100px" ref="listForm" :rules="listRule5" v-if="DialogNumber == 5">

                <el-form-item label="INDEX" required prop="index" class="form-item">
                <el-input 
                  v-model="listForm.index" 
                  placeholder="请输入INDEX标识，如：INDEX1"
                  prefix-icon="el-icon-tickets"
                  size="medium"
                  maxlength="20"
                  show-word-limit
                >
                </el-input>
                <div class="input-tip greyText">用于系统识别的唯一参数标识，建议使用英文大写</div>
              </el-form-item>

              <el-form-item label="INDEX名称" required prop="indeX_NAME" class="form-item">
                <el-input 
                  v-model="listForm.indeX_NAME" 
                  placeholder="请输入INDEX名称"
                  prefix-icon="el-icon-tickets"
                  size="medium"
                  maxlength="30"
                  show-word-limit
                >
                </el-input>
                <div class="input-tip greyText">参数在界面中显示的名称，建议使用中文</div>
              </el-form-item>
            </el-form>

            <el-form :model="listForm" label-width="100px" ref="listForm" :rules="listRule6" v-if="DialogNumber == 6">

                <el-form-item label="巡视名称" required prop="inspection" class="form-item">
                <el-input 
                  v-model="listForm.inspection" 
                  placeholder="请输入巡视名称，如：PATROL1"
                  prefix-icon="el-icon-tickets"
                  size="medium"
                  maxlength="20"
                  show-word-limit
                >
                </el-input>
                <div class="input-tip greyText">用于系统识别的唯一参数标识，建议使用英文大写</div>
              </el-form-item>

              <el-form-item label="巡视中文名称" required prop="inspection_Name" class="form-item">
                <el-input 
                  v-model="listForm.inspection_Name" 
                  placeholder="请输入巡视中文名称"
                  prefix-icon="el-icon-tickets"
                  size="medium"
                  maxlength="30"
                  show-word-limit
                >
                </el-input>
                <div class="input-tip greyText">参数在界面中显示的名称，建议使用中文</div>
              </el-form-item>

              <el-form-item label="备注" class="form-item">
                <el-input 
                  v-model="listForm.remark" 
                  type="textarea" 
                  :rows="5" 
                  placeholder="请输入备注信息、使用场景、注意事项等"
                  resize="none"
                  class="remark-textarea"
                  maxlength="300"
                  show-word-limit
                >
                </el-input>
                <div class="input-tip greyText">备注说明有助于其他用户理解和使用</div>
              </el-form-item>
            </el-form>
            <div class="dialog-footer">
                <el-button @click="handleCancelListDialog" 
                size="small" class="cancel-btn" icon="el-icon-close" round> 
                取消</el-button>
                <el-button  type="primary" @click="handleSaveListDialog" 
                size="small"   class="confirm-btn" icon="el-icon-check" round>
                保存配置
                </el-button>
            </div>
        </div>
    </el-dialog>
</template>
<script>
export default ({
    name:'IndicatorTypeDialog',
    props:{
        visible: {
            type: Boolean,
            default: false
        },
        dialogTitle:{
            type:String,
            default:''
        },
        listForm:{
            type:Object,
            default:()=>{
                return {}
            }
        },
        DialogNumber:{
            type:Number,
            default:0
        }
    },
    data() {
        return {
            dialogVisible: this.visible,
            listRule1:{
                param: [{required: true, message: '请输入参数'}],
                paraM_NAME: [{required: true, message: '请输入参数名称'}],
            },
            listRule2:{
                control: [{required: true, message: '请输入控制值'}],
                controL_NAME: [{required: true, message: '请输入控制值名称'}],
            },
            listRule3:{
                point: [{required: true, message: '请输入POINT'}],
                poinT_NAME: [{required: true, message: '请输入POINT名称'}],
            },
            listRule4:{
                comp: [{required: true, message: '请输入分量'}],
                comP_NAME: [{required: true, message: '请输入分量名称'}],
                valuE_TYPE: [{required: true, message: '请选择类型'}],
                formula: [{required: true, message: '请输入公式'}],
                pricision: [{required: true, message: '请输入精度'}],
            },
            listRule5:{
                index: [{required: true, message: '请输入INDEX'}],
                indeX_NAME: [{required: true, message: '请输入INDEX名称'}],
            },
            listRule6:{
                inspection: [{required: true, message: '请输入巡视名称'}],
                inspection_Name: [{required: true, message: '请输入巡视中文名称'}],
            },

        }
    },
    watch: {
        visible(newVal) {
            this.dialogVisible = newVal
        },
        dialogVisible(newVal) {
            this.$emit('update:visible', newVal)
        },
    },
    methods:{
        handleCancelListDialog(){
            this.$emit('cancel')
        },
        handleSaveListDialog(){
            this.$refs['listForm'].validate((valid) => {
                if (valid) {
                    this.$emit('save',this.listForm)
                }else{
                    return false
                }
            })
            
        }
    }
})
</script>
<style scoped lang="scss">
.input-tip {
  font-size: 12px;
}
.form-row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
</style>
